<template>
  <div>
    <h1>ref函数使用</h1>
    <hr />
    <ul>
      <!-- <li @click="count++">{{ count }}</li> -->
      <li @click="add">{{ count }}</li>

      <li>{{ bool }}</li>
      <li>{{ obj }}</li>
      <li @click="changeObj">{{ obj.name }}期</li>
    </ul>
    <!-- 渲染列表 -->
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <button @click="changeList">修改列表</button>
    <hr />
    <Child />
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导出`ref`函数
2. 在setup函数中调用`ref`函数并传入数据（简单类型或者复杂类型）
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意⚠️：**在setup函数中使用ref结果，需要通过`.value`  访问，模板中使用不需要加.value；而且可以重新=号赋值
 */
import { ref } from 'vue'
import Child from './components/child.vue'
export default {
  components: {
    Child
  },
  setup () {
    // 1. 简单类型
    const count = ref(0)
    const bool = ref(false)

    // 2. 复杂类型
    const obj = ref({ name: '131', age: 6 })

    const list = ref([1, 2, 3])

    // 修改count
    const add = () => {
      count.value++
    }
    // 修改obj
    const changeObj = () => {
      // obj.name 获取不到=》只能通过obj.value获取到定义的值
      console.log(obj, obj.value)
      // obj.value.name = '小红'
      obj.value = {}
    }

    // 修改列表
    const changeList = () => {
      // list.value = []
      // list.value.push(Math.random() * 100 + 1)
      list.value.splice(1, 1)
    }

    return { count, bool, obj, changeObj, add, list, changeList }
  }
}
</script>

<style lang="scss" scoped>
</style>
